  <template>
<div>
  <div style="position: absolute;top: 0;left: 0;width: 100%;height:50.5px;background-color: #475669"></div>
  <div style="position: absolute;top:80px;left: 0;height: 100%;width:249px;background-color: #475669"></div>
  <div style="position: absolute;color: white;font-size: 20px;padding: 10px 80px">
    <p>树叶招聘网</p>
  </div>
  <div style="position: fixed;top: 16px;left:1300px;color: white;z-index: 991">
    <h3>欢迎登录:</h3>
  </div>
  <div style="position: absolute;top:50px;left:0;width: 500px">
      <el-row class="tac">
        <el-col :span="12">
          <h5 class="mb-2"></h5>
          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              text-color="#fff"
          >
            <el-sub-menu index="1">
              <template #title>
                <span style="padding: 20px">管理员</span>
              </template>
              <el-menu-item index="1-2">admin</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-col>
      </el-row>
  </div>
  <div style="position: absolute;top: 80px;left:300px;">
    <el-table :data="filterTableData" style="width: 1400px">
<!--      filterTableData这个表中其实已经包含了id,只是没有将它显示在前端页面上-->
      <el-table-column label="账号" prop="account" />
      <el-table-column label="密码" prop="password" />
      <el-table-column label="职位" prop="position" />
      <el-table-column label="email" prop="email" />
      <el-table-column label="角色" prop="role" />
      <el-table-column label="操作" align="left">
        <template #default="scope">
          <el-button plain @click="edit(scope.row)" type="primary" size="small">
            编辑
          </el-button>
          <el-popconfirm title="确定要删除此用户的所有信息么?"  @confirm="confirmEvent(scope.row.id)">
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
        </el-table-column>
    </el-table>
  </div>
  <div style="z-index: 999">
    <el-dialog v-model="centerDialogVisible" title="修改用户注册信息" width="500" :center="true" style="z-index: 999">
      <el-form  v-model="forms" label-width="25%" style="width:90%" >
        <el-form-item label="账号">
          <el-input v-model="forms.account"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="forms.password"></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="forms.position"></el-input>
        </el-form-item>
        <el-form-item label="email">
          <el-input v-model="forms.email"></el-input>
        </el-form-item>
        <el-form-item label-width="225px">
          <el-button type="warning" @click="msgconfirm(filterTableData.id)">确认</el-button>
          <el-button type="warning" @click="handle">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <div style="position: absolute;top: 0;left:1400px;z-index:900">
    <div class="dropdown">
      <button class="dropbtn">{{user.account}}</button>
      <div class="dropdown-content">
<!--        <a @click="this.$router.push('/personal')">个人简介</a>-->
        <a href="#">编辑账号</a>
        <a @click="this.$router.push('/userlimit')">权限管理</a>
        <a @click="this.$router.push('/home-page')">回到主页</a>
        <a @click="exit">退出登录</a>
      </div>
    </div>
  </div>
  <div style="position: absolute">
    <ul class="ts">
      <li><a @click="this.$router.push('/seekingjob')" v-if="user.position === '求职者'">求职</a></li>
      <li><a @click="this.$router.push('/employ')" v-if="user.position === 'HR'">招聘</a></li>
      <li><a @click="this.$router.push('/recommendation')" v-if="user.position === '求职者'">推荐</a></li>
      <li><a @click="this.$router.push('/record')" v-if="user.position === '求职者'">申请记录</a></li>
    </ul>
  </div>

</div>
</template>

<style scoped>
.ts {
  height: 52px;
  list-style-type: none;
  margin-left: 400px;
  padding: 0;
  overflow: hidden;
  background-color: #39494d;
}
.ts li {
  float: left;
}

.ts li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.ts li a:hover{
  color:#00e3e6 ;
}
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<script >
import axios from "axios";
import request from "@/Utils/request.js";
import { computed, ref } from 'vue'
import {InfoFilled} from "@element-plus/icons-vue";
export default {
  computed: {
    InfoFilled() {
      return InfoFilled
    }
  },
  data(){
    return{
      filterTableData:[],
      centerDialogVisible:false,
      forms:{
        id:'',
        position:'',
        email:'',
        account:'',
        password:'',
      },
      user:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{},
      //userposition:localStorage.getItem("")
    }
  },
  mounted(){
    request.get('/user/all').then(res=>{
        this.filterTableData=res
    })
  },
  methods:{
    exit(){
      localStorage.removeItem("user");
      this.$router.push('/')
      this.$message({
        message:'退出成功!',
        type:'success'
      })
    },
    confirmEvent(id){
      request.delete(`user/delete/${id}`).then(res=>{
        if(res=== 1){
          this.$message({
            message:'删除成功!',
            type:'success'
          })
        }
      })
    },
    handle(){
      window.location.reload();
      this.centerDialogVisible=false;
    },
    edit(obj) {
      this.forms=obj;
      this.centerDialogVisible = true;
    },
    msgconfirm(id){
      request.put('user/update/${id}',this.forms).then(res=>{
            if(res===0){
              this.$message({
                message:'系统异常',
                type:'error'
              })
            }
             if(res === 1){
              this.$message({
                message:'修改成功!',
                type:'success'
              })
               setTimeout(()=>{
                 window.location.reload();
               },2000)
            }else {
              this.$message({
                message:'修改失败!',
                type:'error'
              })
            }
          }).catch(error=>{
        console.log(error)
      })
      //window.location.reload();
    }
  }
}

</script>